<template>
	<view>
		<van-cell title="科室" is-link :value="deptFull != '请选择科室' ? deptFull : showTemp" @click="onShowDeptList" />

		<van-action-sheet :show="deptListVisibility" @close="onCloseDeptList">
			<m-titlebar title="科室选择" @confirm="onSelectDept" @cancel="onCloseDeptList" :color="primaryColor">
				<van-picker ref="deptPicker" :columns="deptListData" @change="onChangeDept" />
			</m-titlebar>
		</van-action-sheet>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		props:{
			show:String
		},
		data() {
			return {
				dept1: '',
				dept2: '',
				deptListVisibility: false,
				deptData: {},
				deptListData: {},
				primaryColor: '#333',
				showTemp:''
			};
		},
		async mounted() {
			// if(this.dp1 || this.dp2){
			// 	this.dept1 = this.dp1
			// 	this.dept2 = this.dp2
			// }
			this.showTemp = this.show
			this.deptData = await this.getPartments()


			this.$nextTick(function() {
				this.deptListData = [{
						values: this.deptData.map(o => o.name)
					},
					{
						values: this.deptData[0].lstDown.map(o => o.name)
					},
				]
				this.primaryColor = getApp().globalData.primaryColor
			})
		},
		methods: {
			async getPartments(){
				try{
					const rspData = await utils.req('/partment/getAllpartments',{token:'1'})
					return rspData
				}catch(e){
					console.error(e)
				}
			},
			onShowDeptList() {
				this.deptListVisibility = true
			},
			onCloseDeptList() {
				this.deptListVisibility = false
			},
			onChangeDept(event) {
				const {
					picker,
					value,
					index
				} = event.detail
				console.log(value)
				console.log(index)
				picker.setColumnValues(1, this.deptData.filter(o => o.name == value[0])[0].lstDown.map(o => o.name))
			},
			onSelectDept(event) {
				const values = this.$refs.deptPicker.getValues()
				this.dept1 = values[0]
				this.dept2 = values[1]
				this.onCloseDeptList()
				const dept1 = this.deptData.filter(o => o.name == this.dept1)[0]
				const dept2 = dept1.lstDown.filter(o => o.name == this.dept2)[0]
				
				this.$emit('change', {detail: {dept1, dept2}, currentTarget: {dataset: {type: 'dept'}}})
			}
		},
		computed:{
			deptFull(){
				if(!this.dept1){
					return "请选择科室"
				}
				if(!this.dept2){
					return `${this.dept1}`
				}
				return `${this.dept1}-${this.dept2}`
			}
		}
	}
</script>

<style lang="scss">

</style>
